<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- saved from url=(0043)http://localhost:8080/mango/cart/list.jhtml -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>购物车</title>
	<c:set var="root" value="${pageContext.request.contextPath}"/>
<link href="${root}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${root}/css/cart.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="${root}/images/tit.ico" type="image/x-icon" />
	<script type="text/javascript">
        // 创建XMLHttpRequest对象
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        alert("你用什么浏览器呢？");
                        throw e;
                    }
                }
            }
        };

        function updateQuantity(quantity, cartid,elementid) {
            // 1.获取异步交互对象
            var xmlhttp = createXMLHttpRequest();
            // 2.设置监听
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var flag = xmlhttp.responseText;

                    if(flag == "false"){
                        alert("修改数量失败");
                    }else {
                        document.getElementById(elementid).value= quantity;
                    }

                }
            };
            // 3.打开连接(为了避免浏览器的缓存，需要加一个时间参数)
            xmlhttp.open("GET","${root}/updateMyCart?quantity="+quantity+"&cartid="+cartid+"&a="+new Date().getTime(), true);
            // 4.发送请求
            xmlhttp.send(null);
        }
        //数量增加
        function plusss(){
            var num = document.getElementById("plus").value;
            num = parseInt(num)+1;
            updateQuantity(num,cartid,"plus");
        }
        //数量减少
        function reducess(){
//            alert("aaaa");
            var num = document.getElementById("reduce").value;
            num = parseInt(num)-1;
            updateQuantity(num,cartid,"reduce");
        }
	</script>
</head>
<body>
<div class="container header">
	<div class="span5">
		<div class="logo">
			<a href="http://localhost:8080/mango/">
				<img src="${root}/image/r___________renleipic_01/logo2.gif" alt="seven商城"/>
			</a>
		</div>
	</div>
	<div class="span9">
<div class="headerAd">
					<img src="${root}/image/header.jpg" width="320" height="50" alt="正品保障" title="正品保障"/>
</div>	</div>
	
	<%@ include file="menu.jsp" %>
	
</div>	
  <%--如果购物项这个单例集合中有值，就说明购物车中有信息，显示购物车信息 --%>
<c:choose>
  <c:when test="${list ne null}">
   <div class="container cart">
		<div class="span24">
			<div class="step step1">
			<span style="line-height:60px; font-size:15px; font-weight:bold;">购物车信息</span>
			</div>
				<table>
					<tbody>
					 <tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					 </tr>
					  <c:forEach var="c" items="${list}">
						<tr>
							<td width="60">
								<input type="hidden" name="id" value="22"/>
								<img src="${root}/${c.product.image}"/>
							</td>
							<td>
								<a target="_blank">${c.product.pname}</a>
							</td>
							<td>
								￥${c.product.shop_price}
							</td>
							<td class="quantity">
								<input onclick="reducess()" type="button" value="-" id="reduce">
								<input  type="text" name="quantity" value="${c.quantity}">
								<input  onclick="plusss()" type="button" value="+" id="plus" >
							</td>
							<td width="140">
								<span class="subtotal">￥${c.product.shop_price * c.quantity}</span>
							</td>
							<td>
								<a href="${root}/deleteMyCart?cartid=${c.cartid}" class="delete">删除</a>
							</td>
						</tr>
					</c:forEach>
				</tbody></table>
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
							<em>
								登录后确认是否享有优惠
							</em>
					<%--赠送积分: <em id="effectivePoint">596</em> --%>
					    商品金额: <strong id="effectivePrice">￥${total}元</strong>
				</div>
				<div class="bottom">
					<a href="${root}/cleanMyCart" id="clear" class="clear">清空购物车</a>
					<a href="${root}/creatOrder" id="submit" class="submit">提交订单</a>
				</div>
		</div>
	  </div>
	</c:when>
	<c:otherwise>
	  <div style="text-align: center;">
	   <span><img src="${root}/images/cry.gif" width="100" height="100"/></span>
	   <span style="font-size: 20px;">
	                  亲，购物车中空空如也，赶紧去商城购物吧
	                  去首页看看？<a href="${root}/index">点击跳转</a>
	   </span>
	  </div>
	</c:otherwise>
</c:choose>
 <%@ include file="bottom.jsp" %>

</body>
</html>
